<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>查看附件</title>
@include('common-css')
<style>
b {
    font-weight: bold;
}

.text-left {
    text-align: left !important;
}

.app-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

header {

}

main {
    padding: 20px;
    font-family: serif;
    overflow-y: auto;
    color: #000;
    line-height: 30px;
}

main h2,
main h3,
main h4 {
    color: #0050b0;
    font-weight: bold;
}

main > section {
}

main > section > h3 {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}

.section-8 {
}

.attachments-table {
    width: 100%;
    font-size: 14px;
    line-height: 30px;
}

.attachments-table > tr > td {
    padding: 10px;
    border: 1px solid #eee;
}

.attachments-table > tr > td:first-child {
    text-align: center;
}

.attachments-table ul {
    list-style: none;
}

.attachments-table ul img {
    vertical-align: middle;
    margin-right: 4px;
}

.attachment-file-link * {
    vertical-align: middle;
}

.ant-modal-body {
    padding: 10px;
}
</style>
</head>
<body>

<div id="app"></div>

<script id="appTemplate" type="x-template">
<a-locale-provider :locale="antdLocale">
    <div class="app-container">

        <header class="special">
            <div class="left_info">
                <h1>查看附件</h1>
            </div>
        </header>

        <main>

            <section v-if="true" class="section-8">

                <table class="attachments-table">
                    <tr v-if="false">
                        <th width="60">序号</th>
                        <th width="350">类别</th>
                        <th>文件</th>
                    </tr>
                    <tr v-for="(typeName, index) in typeNames" :key="index">
                        <td width="60">@{{ index + 1 }}</td>
                        <td width="350">@{{ typeName }}</td>
                        <td>
                            <ul v-if="getAttachmentsOfType(typeName).length">
                                <li v-for="attachment in getAttachmentsOfType(typeName)" :key="attachment.id">
                                    <a class="attachment-file-link" href="javascript:;"
                                       @click="previewAttachment(attachment)">
                                        <img :src="getFileIconUrl(attachment.format)" width="16" height="16">
                                        <span>@{{ attachment.filename }}</span>
                                    </a>
                                </li>
                            </ul>
                            <p v-else style="color: #aaa;">无</p>
                        </td>
                    </tr>
                </table>

            </section>

        </main>

        <a-modal
                :width="900"
                title="图片预览"
                v-model="dialogPreviewImageVisible"
                :footer="null"
                :destroyOnClose="true"
                @ok=""
                @cancel=""
        >
            <p>
                <img style="display: block; width: 100%;" :src="previewImageUrl"/>
            </p>
        </a-modal>

        <a-modal
                :width="900"
                title="文件预览"
                v-model="dialogPreviewPdfVisible"
                :footer="null"
                :destroyOnClose="true"
                @ok=""
                @cancel=""
        >
            <div style="text-align: right;"><a :href="previewPdfIframeViewerUrl" target="_blank">在新窗口中打开</a></div>
            <div style="height: 400px; margin-top: 10px;">
                <iframe style="width: 100%; height: 100%;" :src="previewPdfIframeViewerUrl" frameborder="0"></iframe>
            </div>
        </a-modal>

        <a-modal
                :width="500"
                title="文件预览"
                v-model="dialogPreviewUnsupportedVisible"
                :footer="null"
                :destroyOnClose="true"
                @ok=""
                @cancel=""
        >
            <div v-if="previewUnsupportedAttachment" style="margin-top: 30px; margin-bottom: 30px; line-height: 30px; text-align: center;">
                <div>
                    <img :src="getFileIconUrl(previewUnsupportedAttachment.format)" width="16" height="16">
                    <span>@{{ previewUnsupportedAttachment.filename }}</span>
                </div>
                <div style="margin-top: 20px; color: #666;">该文件不支持在线预览，请下载查看。</div>
                <div><a :href="previewUnsupportedAttachment.filepath" target="_blank">点击下载</a></div>
            </div>
        </a-modal>

    </div>
</a-locale-provider>
</script>

@include('common-js')

<script>
var typeNames = {!! json_encode($typeNames, JSON_UNESCAPED_UNICODE) !!}
var attachments = {!! json_encode($attachments, JSON_UNESCAPED_UNICODE) !!}
</script>

<script>
var app = new Vue({
    el: '#app',
    template: '#appTemplate',
    data: {
        typeNames,
        attachments,

        dialogPreviewImageVisible: false,
        previewImageUrl: '',

        dialogPreviewPdfVisible: false,
        previewPdfFileUrl: '',

        dialogPreviewUnsupportedVisible: false,
        previewUnsupportedAttachment: {},

        antdLocale: antd.locales.zh_CN,
    },
    computed: {
        previewPdfIframeViewerUrl() {
            if (!this.previewPdfFileUrl) {
                return 'about:blank'
            }
            return '/libs/pdfjs/viewer.html?file_url=' + this.previewPdfFileUrl
        },
        hasOthersAttachments() {
            return this.typeNames.includes('其他证明或补充材料')
        },
    },
    mounted() {
    },
    methods: {
        previewAttachment(attachment) {
            console.log('previewAttachment', attachment)
            var fileUrl = attachment.preview_filepath || attachment.filepath
            var dotPos = fileUrl.lastIndexOf('.')
            var format = fileUrl.substring(dotPos + 1).toLowerCase()
            if (['jpg', 'jpeg', 'png', 'gif'].includes(format)) {
                this.showPreviewImageDialog(fileUrl)
            } else if (format == 'pdf') {
                // 因某些文件需要旋转查看，而 showPreviewPdfDialog 方法无旋转功能，所以直接用(Chrome)浏览器的查看PDF功能
                window.open(fileUrl, '_blank')
                // this.showPreviewPdfDialog(fileUrl)
            } else {
                this.showPreviewUnsupportedDialog(attachment)
            }
        },
        showPreviewImageDialog(imageUrl) {
            this.previewImageUrl = imageUrl
            this.dialogPreviewImageVisible = true
        },
        showPreviewPdfDialog(pdfUrl) {
            this.previewPdfFileUrl = pdfUrl
            this.dialogPreviewPdfVisible = true
        },
        showPreviewUnsupportedDialog(attachment) {
            this.previewUnsupportedAttachment = attachment
            this.dialogPreviewUnsupportedVisible = true
        },
        getAttachmentsOfType(typeName) {
            var result = []
            var needsSort = false
            this.attachments.forEach(attachment => {
                if (attachment.type_name == typeName) {
                    result.push(attachment)
                    if (attachment.filename.indexOf('、') != -1) {
                        needsSort = true
                    }
                }
            })
            if (needsSort) {
                result.sort((attachment1, attachment2) => {
                    var filename1 = attachment1.filename
                    var filename2 = attachment2.filename
                    var pos1 = filename1.indexOf('、')
                    var pos2 = filename2.indexOf('、')
                    if (pos1 == -1 && pos2 == -1) {
                        return filename1 == filename2 ? 0 : (filename1 < filename2 ? -1 : 1)
                    } else if (pos1 == -1 && pos2 != -1) {
                        return -1
                    } else if (pos1 != -1 && pos2 == -1) {
                        return 1
                    } else {
                        var num1 = filename1.substring(0, pos1)
                        var num2 = filename2.substring(0, pos2)
                        if (parseInt(num1) && parseInt(num2)) {
                            return parseInt(num1) - parseInt(num2)
                        } else {
                            return num1 == num2 ? 0 : (num1 < num2 ? -1 : 1)
                        }
                    }
                })
            }
            return result
        },
        getFileIconUrl(format) {
            if (['pdf', 'txt', 'zip', 'rar'].includes(format)) {
                return `/images/formats/${format}.png`
            }
            if (['doc', 'docx'].includes(format)) {
                return '/images/formats/word.png'
            }
            if (['xls', 'xlsx'].includes(format)) {
                return '/images/formats/excel.png'
            }
            if (['ppt', 'pptx'].includes(format)) {
                return '/images/formats/ppt.png'
            }
            if (['jpg', 'jpeg', 'png', 'gif', 'tif', 'tiff', 'bmp'].includes(format)) {
                return '/images/formats/image.png'
            }
            return '/images/formats/unknown.png'
        },
        tryParseNumber(str) {
            var value = parseFloat(str)
            return isNaN(value) ? 0 : value
        },
        text2Html(text) {
            var html = '<p>' + text.replace(/\n/g, '</p><p>') + '</p>'
            return html
        },
    }
})
</script>

</body>
</html>
